{% extends 'charts/base.html' %}



{% block content %}
    {% include 'charts/options.html' %}

    <div class="col-lg-12">
        <div class="btn-toolbar" role="toolbar" aria-label="配置选项">
            <div class="btn-group btn-group-xs btn-corner" role="group" id="zq_high">
                <button type="button" class="btn btn-xs btn-default" data-zq="y">Year</button>
                <button type="button" class="btn btn-xs btn-default" data-zq="m">Month</button>
                <button type="button" class="btn btn-xs btn-default" data-zq="w">Week</button>
                <button type="button" class="btn btn-xs btn-default" data-zq="d">Day</button>
                <button type="button" class="btn btn-xs btn-default" data-zq="60m">60M</button>
                <button type="button" class="btn btn-xs btn-default" data-zq="30m">30M</button>
                <button type="button" class="btn btn-xs btn-default" data-zq="5m">5M</button>
                <button type="button" class="btn btn-xs btn-default" data-zq="1m">1M</button>
            </div>
        </div>
        <div id="kline_high" class="kline_chart" style="width:100%; min-height: 600px;"></div>
    </div>

{% endblock %}


{% block js %}
    <script type="text/javascript">
        $(
            function () {
                // 获取浏览器窗口的可视区域的高度
                function getViewPortHeight() {
                    return document.documentElement.clientHeight || document.body.clientHeight;
                }

                $('#kline_high').css('height', getViewPortHeight() - 100);
                var code = 'SH.000001'
                config = {
                    'high': {
                        'frequency': 'd',
                    }
                }

                var url = window.location.href;
                if (url.split('#').length === 2) {
                    code = url.split('#')[1]
                }

                var intervalId;

                config['high']['chart'] = echarts.init(document.getElementById('kline_high'), 'dark', {renderer: 'canvas'});

                // 周期与配置的选择
                var cookie_pre = '_stock';
                var cl_setting = {
                    'fx_qj': 'fx_qj_k',
                    'fx_bh': 'fx_bh_yes',
                    'bi_type': 'bi_type_new',
                    'bi_bzh': 'bi_bzh_yes',
                    'bi_fx_cgd': 'bi_fx_cgd_no',
                    'bi_qj': 'bi_qj_ck',
                    'xd_bzh': 'xd_bzh_yes',
                    'xd_qj': 'xd_qj_dd',
                    'zsd_bzh': 'zsd_bzh_yes',
                    'zsd_qj': 'zsd_qj_dd',
                    'zs_bi_type': 'zs_type_bz',
                    'zs_xd_type': 'zs_type_dn',
                    'zs_qj': 'zs_qj_dd',
                    'zs_wzgx': 'zs_wzgx_zggdd',
                    'show_bi_zs': '1',
                    'show_xd_zs': '1',
                    'show_bi_mmd': '1',
                    'show_xd_mmd': '1',
                    'show_bi_bc': '1',
                    'show_xd_bc': '1',
                    'show_ma': '1',
                    'show_boll': '1',
                    'show_max_chart': '1',
                    'idx_macd_fast': 12,
                    'idx_macd_slow': 26,
                    'idx_macd_signal': 9,
                    'idx_boll_period': 20,
                    'idx_ma_period': '120,250',
                }
                for (let _k in cl_setting) {
                    if ($.cookie(cookie_pre + '_' + _k) !== undefined) {
                        cl_setting[_k] = $.cookie(cookie_pre + '_' + _k);
                    }
                    let _v = cl_setting[_k];
                    let obj = $('#' + _k);
                    if (obj.attr('type') === 'text') {
                        obj.val(_v);
                    }
                    if (obj.attr('type') === 'checkbox') {
                        obj.attr('checked', _v === '1');
                    }
                    if (obj.attr('type') === 'select') {
                        obj.find("option[value='" + _v + "']").attr("selected", true);
                    }
                }
                $('.chart_setting input,.chart_setting select').change(function () {
                    let _key = $(this).attr('id');
                    let _type = $(this).attr('type');
                    let _val = $(this).val();
                    if (_type === 'checkbox') {
                        _val = $(this).is(':checked') ? '1' : '0';
                    }
                    cl_setting[_key] = _val;
                    $.cookie(cookie_pre + '_' + _key, cl_setting[_key], {expires: 999});
                    console.log('setting change key ' + _key + ' val ' + _val);
                    $.message({
                        message: '缠论配置变更，需重新点击当前周期更新图表数据',
                        type: 'success'
                    });
                });


                {% for level in show_level %}
                    if ($.cookie(cookie_pre + '_frequency_{{ level }}') !== undefined) {
                        config['{{ level }}']['frequency'] = $.cookie(cookie_pre + '_frequency_{{ level }}');
                    }
                    $('#zq_{{ level }}').find('[data-zq="' + config['{{ level }}']['frequency'] + '"]').addClass('btn-primary');

                    $('#zq_{{ level }} button').click(function () {
                        $('#zq_{{ level }} button').removeClass('btn-primary');
                        $(this).addClass('btn-primary');
                        config['{{ level }}']['frequency'] = $(this).attr('data-zq');
                        $.cookie(cookie_pre + '_frequency_{{ level }}', config['{{ level }}']['frequency'], {expires: 999});
                        fetchData(code, config['{{ level }}'], false);
                    });
                {% endfor %}


                // 请求 Kline 方法
                function fetchData(code, show_config, update = false) {
                    $('#loading').loading({theme: 'dark'});

                    let post_data = {
                        'frequency': show_config['frequency'],
                    }
                    for (let _k in cl_setting) {
                        post_data[_k] = cl_setting[_k];
                    }
                    $.ajax({
                        type: "POST",
                        url: "/stock/kline",
                        data: post_data,
                        success: function (result) {
                            var re_obj = (new Function("return " + result))();
                            if (update === false) {
                                show_config['chart'].clear();
                            }
                            show_config['chart'].setOption(re_obj);
                            {#chart.setOption(result.data);#}
                            $('#loading').loading('stop');
                        }

                    });
                }

                fetchData('', config['high'], true);
            }
        );
    </script>
{% endblock %}